// https://www.cnblogs.com/samve/p/12347658.html

import {useState,useRef,useCallback,useEffect,useMemo} from 'react';

// ts 在js基础上进行的类型定义  属于严格模式
export default function TodoListPage(){
    const a: string | number = 1;
    console.log(a);
    interface Istate1 {
        name: string;
        age: number;
    }
    const obj:Istate1 = {
        name:"zkl",
        age:28
    }

    interface person {
        nickname:string,
        age?:number
    }
    const obj1:person = {
        nickname:"zuozuomu",
        age:18
    }

    const list1:Array<number> = [1,2,4,123];
    const arr:string[] = ["a","b","c"]

    const pers:Array<Istate1> = [
        {
            name:"yoyo",
            age:19
        }
    ]

    const ones:person[] = [
        {
            nickname:"helo",
            age:29
        }
    ]
    
    // void  
    function changeTodo(num:number,tips:string,flag:boolean):number{
        return 10000;
    }

    // public、private和protected。
    // public  公有
    // private 私有

    interface liuyan {
        id:number,
        title:string,
        content:string
    }

    const [title,setTitle] = useState<any>('');
    let  [count,setCount] = useState<number>(100);
    const [content,setContent] = useState<string>('');

    class Comment{
        constructor(
            public id:number,
            public title:string,
            public content:any
        ){

        }
    }

    const [list,setList] = useState<Array<liuyan>>([
        {   
            id:1,
            title:"Vue",
            content:"So easy Vue!!"
        },
        {   
            id:2,
            title:"React",
            content:"React is eayier than vue"
        }
    ])

    const [list2,setList2] = useState<Comment[]>(
        [
            new Comment(1,"Vue","Vue Is os Easy"),
            new Comment(2,"React","React 精通了吧...")
        ]
    )


    const titleRef:any = useRef(null)
    const contentRef:any = useRef(null)

    function changeTitle():void{
        console.log(titleRef.current.value)
        setTitle(titleRef.current.value)
    }

    function changeContent():void{
        setContent(contentRef.current.value)
    }

    function addLiuYan():void{
        list2.push(new Comment(list2.length+1,title,content))
        setList2([...list2])
        setTitle('')
        setContent('')
        titleRef.current.value =""
        contentRef.current.value=""
    }

    function deleteOne(id:number):void{
        // list2.splice(id,1);
        var thelist = list2.filter(item=>item.id!==id);
        setList2([...thelist])
    }

    function updateOne(item:Comment,index:number):void{
        var value = window.prompt(item.title,item.content);
        console.log(value)
        if(value){
           list2.splice(index,1,{...item,content:value})
           setList2([...list2])
        }
    }
    return (
        <div>
            <h3>ts+hooks 实现简易的留言板 </h3>
            <button onClick={()=>setCount(++count) }   > {count} </button>
            <div>
                <h4>显示留言板</h4>
                <div>
                    <ul>
                        {
                            list2.map((l,i)=>{
                                return (
                                    <li key={l.id}>
                                        <p>序号: {l.id}</p>
                                        <p>标题: {l.title }</p>
                                        <p>标题: {l.content }</p>
                                        <p>
                                            <button onClick={()=>deleteOne(l.id)}>删除</button>
                                            <button onClick={()=>updateOne(l,i)}>更新</button>
                                        </p>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
            <div>
                <h4>提交留言</h4>
                <p>
                    标题: <input type="text" onChange={changeTitle} ref={titleRef} placeholder="请输入标题" />
                </p>
                <p>
                    内容: <input type="text" onChange={changeContent} ref={contentRef} placeholder="请输入内容" />
                </p>
                <p>
                    <button onClick={addLiuYan}>添加留言</button>
                </p>
            </div>
        </div>
    )
}

